<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>First look</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.common.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/nova.core.js"></script>
        <script src="../../source/js/nova.data.js"></script>
        <script src="../../source/js/nova.popup.js"></script>
        <script src="../../source/js/nova.list.js"></script>
        <script src="../../source/js/nova.dropdownlist.js"></script>
        <script src="../../source/js/nova.draganddrop.js"></script>
        <script src="../../source/js/nova.pageable.js"></script>
        <script src="../../source/js/nova.sortable.js"></script>
        <script src="../../source/js/nova.groupable.js"></script>
        <script src="../../source/js/nova.grid.js"></script>
        <script src="../../source/js/nova.chart.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">
            nova UI provides everything you need for building modern, interactive, JavaScript applications. In addition to having more than 10 UI widgets, including a Grid, Chart, and ComboBox, nova delivers a rich framework for client-side data binding, templating, animation, and drag-and-drop actions. Don't waste time trying to find and use tons of scattered jQuery plug-ins. nova UI incorporates a seamless, professionally tested and supported HTML5 toolbox for every project.
        </div>
        <!-- description -->
        <div id="example" class="n-content">
            <div id="datasource-views" class="n-header" style="background-image:none">
                <div class="selector">
                    <h3>Estimated Internet Users (Source: ITU)</h3>
                    <label for="country">Select country:</label>
                    <input id="country" />
                </div>
                <div id="grid"></div>
                <div id="chart" class="n-header"></div>
            </div>

            <div class="configuration configuration-horizontal-bottom">
                <span class="infoHead">Information</span>
                <p>
                    Multiple components can be bound to a single data source.
                </p>
                <p>
                    Any operations on the data source (sorting, filtering, etc.)
                    are automatically propagated to all bound components.
                </p>
                <p>
                    <strong>Note:</strong>
                    Security restrictions in Chrome prevent this
                    example from working when the page is
                    loaded from the file system (via file:// protocol).
                </p>
            </div>

            <style scoped>
                #datasource-views {
                    padding: 20px;
                    border-radius: 10px;
                    border-style: solid;
                    border-width: 1px;
                    overflow: hidden;
                }

                .selector {
                    text-align: right;
                }
                *+html .selector { margin-bottom: 25px; }

                .selector h3 {
                    float: left;
                    margin: 0;
                    font-size: 16px;
                    font-weight: normal;
                }

                .selector h3,
                .n-dropdown {
                    vertical-align: middle;
                }

                .n-dropdown {
                    text-align: left;
                }

                #country {
                    width: 250px;
                    text-align: left;
                }

                #grid {
                    left: 480px;
                    margin-left: 1%;
                    top: 121px;
                    position: absolute;
                    right: 40px;
                    height: 278px;
                }

                #grid .n-header .n-link {
                    padding: 0.3em 0.6em;
                }

                #chart {
                    width: 430px;
                    height: 278px;
                    margin-top: 25px;
                    padding-left: 1px;
                    border-style: solid;
                    border-width: 1px;
                }
            </style>

            <script>
                var transport = {
                    read: {
                        url: "../datasource/internet-users.json",
                        dataType: "json"
                    }
                };

                var countriesDataSource = new nova.data.DataSource({
                    transport: transport,
                    group: {
                        field: "country",
                        dir: "asc"
                    }
                });

                var sharedDataSource = new nova.data.DataSource({
                    transport: transport,
                    sort: {
                        field: "year",
                        dir: "asc"
                    }
                });

                function filterCountries() {
                    sharedDataSource.filter([{
                        field: "country",
                        operator: "equals",
                        value: $("#country").val()
                    }, {
                        field: "year",
                        operator: "greaterThanEqual",
                        value: 2000
                    }]);
                }

                for (var group in countriesDataSource.view()) {
                    group = countriesDataSource.view()[group];
                    for (var i = 1; i < group.items.length; i++) group.items[i].growth = (group.items[i].value - group.items[i-1].value) / 100.0
                }

                function createGrid() {
                    $("#grid").novaGrid({
                        dataSource: sharedDataSource,
                        scrollable: false,
                        sortable: {
                            allowUnsort: false
                        },
                        columns: [
                            {
                                field: "year",
                                title: "Year",
                                width: "100px"
                            },
                            {
                                field: "value",
                                title: "Estimated Users",
                                template: '#= nova.toString(value, "N0") #'
                            },
                            {
                                field: "growth",
                                title: "Growth",
                                template: '#= nova.toString(growth, "p") #',
                                width: "100px"
                            }
                        ]
                    });
                }

                function createChart() {
                    $("#chart").novaChart({
                        theme: $(document).data("novaSkin") || "nova",
                        dataSource: sharedDataSource,
                        legend: {
                            visible: false
                        },
                        series: [{
                            type: "column",
                            field: "value"
                        }],
                        axisDefaults: {
                            labels: {
                                font: "11px Tahoma, sans-serif"
                            }
                        },
                        valueAxis: {
                            labels: {
                                format: "{0:N0}"
                            }
                        },
                        categoryAxis: {
                            field: "year"
                        },
                        tooltip: {
                            visible: true,
                            format: "{0:N0}"
                        }
                    });
                }

                $(document).ready(function() {
                    $("#country")
                        .val("United States")
                        .novaDropDownList({
                            dataSource: countriesDataSource,
                            dataTextField: "value",
                            change: filterCountries
                        });

                    filterCountries();

                    createGrid();
                    createChart();

                    $(document).bind("nova:skinChange", function(e) {
                        createChart();
                    });
                });
            </script>
        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>


